<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Playground</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        #canvas {
            position: absolute;
        }

        #control {
            position: absolute;
            top: 8px;
            left: 24px;
            color: #fff;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
    <div id="control"></div>
    <script src="./js/live2dcubismcore.min.js"></script>
    <script src="./js/live2d.min.js"></script>
    <script src="./js/pixi.min.js"></script>
    <script src="./js/index.min.js"></script>
    <script>
        const cubism2Model =
            "live2d/neptune/neptune.model.json";
        // const cubism4Model =
        //     "live2d/a/a.model3.json";

        (async function main() {
            const app = new PIXI.Application({
                view: document.getElementById("canvas"),
                autoStart: true,
                resizeTo: window
            });

            const model2 = await PIXI.live2d.Live2DModel.from(cubism2Model);
            // const model4 = await PIXI.live2d.Live2DModel.from(cubism4Model);

            app.stage.addChild(model2);
            // app.stage.addChild(model4);

            model2.scale.set(0.3);
            // model4.scale.set(0.25);

            // model4.x = 300;
        })();
    </script>


</body>

</html>